/*
1 点击 “+”触发tap点击事件
  1 调用小程序内置的选择图片的 api 
  2 获取到图片的路径 数组
  3 吧图片路径都存入到data变量中
  4 页面就可以根据图片数组进行循环显示 自定义组件
2 点击 自定义图片组件 
  1 获取被点击的元素的索引
  2 获取 data中的图片数组
  3 根据索引 数组中删除对应的元素
  4 吧数组重新设置会data中
3 点击提交
  1 获取文本域的内容
    1 data中定义变量 类似 输入框的获取
    2 文本域 绑定 输入事件 事件触发的时候 吧输入框的值 存入到变量中
  2 对这些内容 合法性验证
  3 验证通过 用户选择的图片 上传到专门的图片服务器 返回图片外网链接
    1 遍历图片数组
    2 挨个上传
    3 自己再维护图片数组 存放 图片上传后的外网的链接
  4 文本域 和 外网的图片的路径 一起提交到服务器 【前端的模拟，不会发送请求到后台】
  5 清空当前页面
  6 返回上一页
*/
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[{
      id:0,
      value:"体验问题",
      isActive:true
    },
    {
      id:1,
      value:"商品，商家投诉举报",
      isActive:false
    }],
    // 被选中的图片路径数组
    chooseImgs:[],
    // 文本域的类容
    textVal:"",
  },
  // 外网的图片的路径数组
  UpLoadImages:[],
  //标题的点击事件
  handTabsItemChange(e){
    // console.log(e);
    //获取被点击的标题的索引
    const {index} = e.detail
    //2.修改原数组，激活选中效果
    let {tabs}  = this.data
    tabs.forEach((v,i) =>i===index?v.isActive=true:v.isActive = false);
    //3.赋值到data中
    this.setData({
      tabs
    })
    
  },
  // 点击+选择图片
  handChooseImg(){
    // 2 调用小程序内置的选择图片的api
    wx.chooseImage({
      // 同时选中的图片数量
      count: 9,
      // 图片的格式 原图 压缩
      sizeType: ['original','compressed'],
      // 图片的来源 相册 照相机
      sourceType: ['album','camera'],
      success: (result)=>{
        this.setData({
          // 为了防止用户继续添加图片 把旧数组和新数组进行拼接
          chooseImgs:[...this.data.chooseImgs,...result.tempFilePaths]
        })
      },
    });
  },
  // 点击 自定义图片组件
  handleRemoveImg(e){
    // 2 获取被点击的组件的索引
    const {index} = e.currentTarget.dataset;
    console.log(e);
    // 3 获取data中的图片数组
    let {chooseImgs} = this.data;
    // 4 删除元素
    chooseImgs.splice(index,1);
    // 填充回data中
    this.setData({
      chooseImgs
    })
    
  },
  // 文本域的输入事件
  handleTextInput(e){
    this.setData({
      textVal:e.detail.value
    })
  },
  // 点击提交
  handleFormSubmit(){
    // 1 获取文本域的内容 图片数组
    const {textVal,chooseImgs} = this.data;
    // 2 合法性的验证 trim:去掉空格
    if(!textVal.trim()){
      // 不合法
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true,
      });
      return;
    }
    // 3 准备上传图片到 专门的图片服务器
    // 上传文件的 api 不支持 多个文件同时上传 遍历数组 挨个上传
    // 显示正在等待的图片
    wx.showLoading({
      title: "正在上传中",
      mask: true,
    });

    // 判断有没有需要上传的图片数组
    if(chooseImgs.length != 0){
      chooseImgs.forEach((v,i)=>{

        wx.uploadFile({
          // 图片需要上传的地址
          url: 'https://images.ac.cn/simple.html',
          // 被上传的文件的路径
          filePath: v,
          // 上传文件的名称 后台来获取文件
          name: "file" ,
          // 顺带的文本信息
          formData: {},
          success: (result)=>{
            console.log(result);
            let url = JSON.parse(result.data).url;
            this.UpLoadImages.push(url);
            
            // 所有图片都上传完毕了才触发的代码
            if(i === chooseImgs.length-1){
              // 关闭等待框
              wx.hideLoading();
              console.log("把文本的内容和外网的图片数组 提交到后台中")
              // 提交都成功了
              // 重置页面
              this.setData({
                textVal:"",
                chooseImgs:[]
              })
              // 返回上一个页面
              wx.navigateBack({
                delta: 1
              });
            }
          },
        });
            
    })
    }else{

      wx.hideLoading();
      console.log("知识提交了文本");
      wx.navigateBack({
        delta: 1
      });
    }

  
  }
})